<template>
  <div class="apisecurity-overview-wrap">
    <div class="grid-column-4">
      <icon-kpi :config="kpi_1"></icon-kpi>
      <icon-kpi :config="kpi_2"></icon-kpi>
      <icon-kpi :config="kpi_3"></icon-kpi>
      <icon-kpi :config="kpi_4"></icon-kpi>
    </div>
    <div class="column-divided"></div>
    <div class="grid-column-3">
      <div class="chart-container">
        <title-chart
          title="API来源分布"
          type="chart-cirque"
          :dataset="columnOption1"
        ></title-chart>
      </div>
      <div class="chart-container" id="pieEChart">
        <title-chart
          title="API应用分布TOP10"
          type="chart-pie"
          :dataset="columnOption2"
        ></title-chart>
      </div>
      <div class="chart-container">
        <title-chart
          title="数据分级TOP5"
          type="chart-cirque"
          :dataset="columnOption3"
        ></title-chart>
      </div>
    </div>
    <div class="column-divided"></div>
    <div class="grid-column-3">
      <div class="chart-container">
        <title-chart
          title="敏感应用分布"
          type="chart-bar"
          :dataset="columnOption4"
        ></title-chart>
      </div>
      <!--      <div class="chart-container">-->
      <!--        <title-chart-->
      <!--          title="接口访问量TOP10"-->
      <!--          type="chart-bar"-->
      <!--          :dataset="columnOption5"-->
      <!--        ></title-chart>-->
      <!--      </div>-->

      <div class="chart-container">
        <title-chart
          title="接口调用"
          type="chart-line-bar"
          :dataset="columnOption5"
        ></title-chart>
      </div>
      <div class="chart-container">
        <title-chart
          title="数据分类Top5"
          type="chart-bar"
          :dataset="columnOption6"
        ></title-chart>
      </div>
    </div>
    <div class="column-divided"></div>
    <div class="grid-column-3">
      <div class="chart-container">
        <title-chart
          title="接口响应状态分布"
          type="chart-cirque"
          :dataset="columnOption7"
        ></title-chart>
      </div>
      <div class="chart-container">
        <title-chart
          title="近7日API变化趋势"
          type="chart-scatter"
          :dataset="columnOption8"
        ></title-chart>
      </div>
      <!--      <div class="chart-container">-->
      <!--        <title-chart-->
      <!--          title="访问量"-->
      <!--          type="chart-scatter"-->
      <!--          :dataset="columnOption9"-->
      <!--        ></title-chart>-->
      <!--      </div>-->
      <div class="chart-container">
        <title-chart title="接口动态脱敏" :type="'table'">
          <div class="chart-table">
            <el-table
              height="100%"
              :stripe="true"
              header-cell-class-name="common-header-style"
              :data="columnOption9.source"
            >
              <el-table-column
                label="应用名称"
                align="left"
                prop="manageName"
                show-overflow-tooltip
              />
              <el-table-column
                label="敏感字段"
                align="left"
                prop="reg"
                show-overflow-tooltip
              />
              <el-table-column
                label="脱敏显示"
                align="left"
                prop="replaceValue"
                show-overflow-tooltip
              />
            </el-table>
          </div>
        </title-chart>
      </div>
    </div>
    <div class="column-divided"></div>
    <div class="grid-column-1">
      <div class="chart-container">
        <title-chart
          title="流量分析"
          type="chart-bar"
          :dataset="columnOption10"
        ></title-chart>
      </div>
    </div>
  </div>
</template>

<script>
import IconKpi from "@/components/IconKpi";
import TitleChart from "@/components/EChart/TitleChart";
import { listInfo } from "@/api/datascan/overview/overview";
import {
  assetStatistics,
  dataLevelStatistics,
  totalInterfaceDataLevel,
  upDownflow,
  downUpflow,
  getErrorData,
  getAccessFlow,
  getInterfaceTrend,
  getInterfaceStatic,
  getInterfaceCount,
  getSensitiveApplication,
  dataTypeStatistics,
  getDesensitizationData,
  getAccessFlowTrue,
  dataLevelStatisticsList,
  getSensitiveInterface,
} from "@/api/apisecurity/overview/overview";
import BaseList from "@/mixins/BaseList";
import { getPercent } from "@/utils/util";
import { xAxis } from "../../screenConfig/dataComponents/configuration/common";

export default {
  name: "index",
  mixins: [BaseList],
  components: {
    IconKpi,
    TitleChart,
  },
  data() {
    return {
      flag: false, //没提示
      kpi_1: {
        icon: "iconfont icon-zichanzongshu",
        color: "#e69138",
        label: "敏感接口",
        value: 0,
      },
      kpi_2: {
        icon: "iconfont icon-zichanshangxianshu",
        color: "#72c140",
        label: "接口总数",
        value: 0,
      },
      kpi_3: {
        icon: "iconfont icon-zichanxiaxianshu",
        color: "#e13c39",
        label: "上线接口数",
        value: "0",
      },
      kpi_4: {
        icon: "iconfont icon-yingyongshu",
        color: "#448ef7",
        label: "应用数",
        value: "0",
      },
      columnOption1: {
        dimensions: ["passSource", "count"],
        source: [],
        option: {
          color: ["#448ff7", "#72c240", "#e13c39"],
          legend: {
            formatter: function (name) {
              return name + " | ";
            },
          },
          tooltip: {
            show: true,
            position: function (point, params, dom, rect, size) {
              return [0, point[1]];
            },
            formatter: function (params) {
              return `<div>${params.marker} ${params.name} | ${
                params.percent ? params.percent : 0
              }%  ${params.data["count"]}</div>`;
            },
          },
        },
      },
      columnOption2: {
        dimensions: ["aplName", "nums"],
        source: [],
        option: {
          color: [
            "#458ef7",
            "#939e26",
            "#7936d8",
            "#2b4cd8",
            "#d33dc8",
            "#42bee5",
            "#72c141",
            "#e69137",
            "#e13c3a",
            "#e2bb22",
          ],
          legend: {
            formatter: function (name) {
              return name + " | ";
            },
          },

          tooltip: {
            show: true,
            position: function (point, params, dom, rect, size) {
              return [0, point[1]];
            },
            formatter: function (params) {
              return `
              <div>${params.marker} ${params.name} | ${
                params.percent ? params.percent : 0
              }%  ${params.data["nums"]}</div>`;
            },
          },
        },
      },
      columnOption3: {
        dimensions: ["dataName", "nums"],
        source: [],
        option: {
          color: ["#448ff7", "#72c141", "#e69137", "#e13c3a"],
          legend: {
            formatter: function (name) {
              return name + " | ";
            },
          },
          tooltip: {
            show: true,
            position: function (point, params, dom, rect, size) {
              return [0, point[1]];
            },
            formatter: function (params) {
              return `<div>${params.marker} ${params.name} | ${
                params.percent ? params.percent : 0
              }%  ${params.data["nums"]}</div>`;
            },
          },
        },
      },
      columnOption4: {
        dimensions: ["dataName", "nums"],
        source: [],
        option: {
          // xAxis: {
          //   show: true,
          //   type: "category",
          //   axisLine: {
          //     show: true,
          //   }, // 坐标轴线
          //   axisTick: {
          //     show: false,
          //   }, // 坐标轴刻度
          //   axisLabel: {
          //     show: true,
          //     rotate: -15,
          //     margin: 20,
          //     interval: 0,
          //     align: "center",
          //     // verticalAlign: 'middle',
          //     width: 60,
          //     // overflow: "breakAll",
          //     // ellipsis: "...",
          //     formatter: function (value) {
          //       let tip = value.length > 10 ? "..." : "";
          //       return value.substring(0, 9) + tip;
          //     },
          //   }, // 坐标轴标签
          //   splitLine: {
          //     show: false,
          //   },
          // },
          yAxis: {
            name: "单位： 个",
            nameGap: 30,
          },
          color: ["#448EF7"],
        },
      },
      columnOption5: {
        dimensions: ["date", "value", "percent"],
        source: [],
        option: {
          color: ["rgba(0, 0, 180, 0.4)", "#5470C6"],
          legend: {
            data: ["调用次数", "调用成功率"],
          },
          xAxis: {
            show: true,
            type: "category",
            axisLine: {
              show: true,
            }, // 坐标轴线
            axisTick: {
              show: false,
            }, // 坐标轴刻度
            axisLabel: {
              show: true,
              rotate: -15,
              margin: 20,
              interval: 0,
              align: "center",
              width: 60,

              // verticalAlign: 'middle',
              // overflow: "breakAll",
              // ellipsis: "...",
              // formatter: function (value) {
              //   let tip = value.length > 10 ? "..." : "";
              //   return value.substring(0, 9) + tip;
              // },
            }, // 坐标轴标签
            splitLine: {
              show: false,
            },
          },
          yAxis: [
            {
              type: "value",
              splitNumber: 5,
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                },
              },
              name: "单位： 次",
              nameGap: 22,
            },
            {
              type: "value",
              axisLabel: {
                formatter: "{value} %",
              },
              splitLine: {
                show: false,
              },
              name: "单位： %",
              nameGap: 22,
            },
          ],
        },
      },
      columnOption6: {
        dimensions: ["dataName", "nums"],
        source: [],
        option: {
          color: ["#39a5e1"],

          // xAxis: {
          //   show: true,
          //   type: "category",
          //   axisLine: {
          //     show: true,
          //   }, // 坐标轴线
          //   axisTick: {
          //     show: false,
          //   }, // 坐标轴刻度
          //   axisLabel: {
          //     show: true,
          //     rotate: -15,
          //     margin: 20,
          //     interval: 0,
          //     align: "center",
          //     // verticalAlign: 'middle',
          //     width: 60,
          //     // overflow: "breakAll",
          //     // ellipsis: "...",
          //     formatter: function (value) {
          //       let tip = value.length > 10 ? "..." : "";
          //       return value.substring(0, 9) + tip;
          //     },
          //   }, // 坐标轴标签
          //   splitLine: {
          //     show: false,
          //   },
          // },
          yAxis: {
            name: "单位： 个",
            nameGap: 30,
          },
        },
      },
      columnOption7: {
        dimensions: ["错误代码", "数量"],
        source: [],
        option: {
          color: ["#448ff7", "#72c141", "#e69137", "#e13c3a"],
          legend: {
            formatter: function (name) {
              return name + " | ";
            },
          },
          tooltip: {
            show: true,
            position: function (point, params, dom, rect, size) {
              return [0, point[1]];
            },
            formatter: function (params) {
              return `<div>${params.marker} ${params.name} | ${
                params.percent ? params.percent : 0
              }%  ${params.data["数量"]}</div>`;
            },
          },
        },
      },
      columnOption8: {
        dimensions: ["days", "upnum", "downnum"],
        source: [],
        option: {
          nameList: ["API新增", "API下线"],
          xAxis: {
            show: true,
            type: "category",
            axisLine: {
              show: true,
            }, // 坐标轴线
            axisTick: {
              show: false,
            }, // 坐标轴刻度
            axisLabel: {
              show: true,
              interval: 0,
              rotate: -15,
              align: "center",
              width: 45,
              margin: 20,
              // overflow: "breakAll",
              // ellipsis: "...",
            }, // 坐标轴标签
            splitLine: {
              show: false,
            },
          },
          yAxis: {
            name: "单位： 个",
            nameGap: 22,
          },
        },
      },
      columnOption9: {
        source: [],
      },
      // columnOption9: {
      //   dimensions: ['date', 'value'],
      //   source: [],
      //   option: {
      //     nameList: ['访问量']
      //   }
      // },
      columnOption10: {
        dimensions: ["date", "up", "down"],
        source: [],
        option: {
          color: ["#72c240", "#448ff7"],
          legend: {
            show: true,
            data: ["上行", "下行"],
          },
          yAxis: {
            name: "单位： KB",
            nameGap: 22,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
        },
      },
    };
  },
  methods: {
    clue(m) {
      if (!this.flag) {
        this.handleListTips(m);
        this.flag = true;
      }
    },
    getSensitiveInterface() {
      getSensitiveInterface().then((res) => {
        if (res && res.code === 200) {
          this.kpi_1.value = res.data || 0;
        } else {
          this.clue(res);
        }
      });
    },
    /**
     * 顶部数据及资产来源分布
     */
    assetStatistics() {
      assetStatistics().then((res) => {
        if (res && res.code === 200) {
          this.kpi_2.value = res.data.totalAssets;
          this.kpi_3.value = res.data.assetsOnlineNumber;
          if (!res.data.assetSource.every((item) => item.count == 0)) {
            this.columnOption1.source = res.data.assetSource;
            let _this = this;
            this.columnOption1.option.legend.formatter = function (name) {
              let passSource = null;
              let passSourcecount = 0;
              let count = null;
              _this.columnOption1.source.forEach((item) => {
                passSourcecount = passSourcecount + item.count;
                if (item.passSource == name) {
                  passSource = item.passSource + " | ";
                  count = " " + item.count;
                }
              });
              passSource =
                passSource + getPercent(count, passSourcecount) + count;
              return passSource;
            };
          }
        } else {
          this.clue(res);
        }
      });
    },

    /**
     * 资产应用分布
     */
    getInterfaceStatic() {
      getInterfaceStatic().then((res) => {
        if (res && res.code === 200) {
          this.columnOption2.source =
            res.data.length > 10 ? res.data.slice(0, 10) : res.data;
          // console.log(this.columnOption2.source);
          let _this = this;
          let pieEChart = document
            .getElementById("pieEChart")
            .getBoundingClientRect();
          //自定义图例样式 （名称 | 百分比  数值）
          let total = this.columnOption2.source.reduce((r, c) => {
            r += c.nums ? c.nums : 0;
            return r;
          }, 0);
          this.columnOption2.option.legend.formatter = function (prop) {
            let length =
              pieEChart.width > 560 ? (pieEChart.width - 420) / 10 : 0;
            // console.log(length);
            let item = _this.columnOption2.source.find(
              (f) => f.aplName === prop
            );

            let str = prop.substr(
              0,
              (item.nums.toString().length > 3
                ? 6 - (item.nums.toString().length - 3)
                : 7) + length
            );
            console.log(str);
            let legendName = item
                ? prop.length === str.length
                  ? str
                  : str + "..."
                : "",
              legendOthers = item
                ? " " +
                  " | " +
                  " " +
                  parseFloat(
                    (((item.nums ? item.nums : 0) / total) * 100).toFixed(2)
                  ) +
                  "% " +
                  " "
                : "",
              legendValue = item ? item.nums : "";
            return legendName + legendOthers + legendValue;
          };
        } else {
          this.clue(res);
        }
      });
    },
    /**
     * 数据分级
     */
    dataLevelStatistics() {
      dataLevelStatisticsList().then((res) => {
        if (res && res.code === 200) {
          let data = res.data.list;
          if (res.data.levelNames && res.data.levelNames.length > 0) {
            res.data.levelNames.forEach((f) => {
              let index = res.data.list.findIndex((v) => v.dataName === f);
              if (index === -1) {
                data.push({
                  dataName: f,
                  nums: 0,
                });
              }
            });
          }
          this.columnOption3.source = data.length > 5 ? data.slice(0, 5) : data;
          let _this = this;
          this.columnOption3.option.legend.formatter = function (name) {
            let dataName = null;
            let totalNumber = null;
            let nums = null;
            _this.columnOption3.source.forEach((item) => {
              totalNumber = totalNumber + item.nums;
              if (item.dataName == name) {
                dataName = item.dataName + " | ";
                nums = " " + item.nums;
              }
            });
            dataName = dataName + getPercent(nums, totalNumber) + nums;
            return dataName;
          };
        } else {
          this.clue(res);
        }
      });
    },
    totalInterfaceDataLevel() {
      totalInterfaceDataLevel().then((res) => {
        if (res && res.code === 200) {
          // this.columnOption3.source = res.data
        }
      });
    },

    /**
     * 敏感应用分布
     */
    getSensitiveApplication() {
      getSensitiveApplication().then((res) => {
        if (res && res.code === 200) {
          this.columnOption4.source = res.data;
          // this.columnOption3.source = res.data
        } else {
          this.clue(res);
        }
      });
    },
    /**
     * 接口调用
     */
    getInterfaceCall() {
      Promise.all([this.getAccessFlow(), this.getAccessFlowTrue()]).then(
        (res) => {
          if (res[0].access && res[0].access.length > 0) {
            res[0].access.forEach((f, index) => {
              f.percent =
                res[1].access[index] && res[1].access[index].value
                  ? parseInt(
                      (parseInt(res[1].access[index].value) /
                        parseInt(f.value)) *
                        100
                    ).toString()
                  : 0;
            });
          }

          this.columnOption5.source = res[0].access || [];
        }
      );
    },
    getAccessFlow() {
      return new Promise((resolve, reject) => {
        getAccessFlow().then((res) => {
          if (res && res.code === 200) {
            resolve(res.data);
            // this.columnOption9.source = res.data.access
          } else {
            reject();
          }
        });
      });
    },
    getAccessFlowTrue() {
      return new Promise((resolve, reject) => {
        getAccessFlowTrue().then((res) => {
          if (res && res.code === 200) {
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },
    /**
     * 数据分类
     */
    dataTypeStatistics() {
      dataTypeStatistics().then((res) => {
        if (res && res.code === 200) {
          this.columnOption6.source = res.data;
          // this.columnOption3.source = res.data
        } else {
          this.clue(res);
        }
      });
    },
    /**
     * 接口错误分布
     */
    getErrorData() {
      getErrorData().then((res) => {
        if (res && res.code === 200) {
          this.columnOption7.source = res.data.errorDist.reduce((r, c) => {
            r.push({
              错误代码: c.name,
              数量: c.value,
            });
            return r;
          }, []);
          let _this = this;
          this.columnOption7.option.legend.formatter = function (name) {
            let nameData = null;
            let countnum = null;
            let count = null;
            _this.columnOption7.source.forEach((item) => {
              countnum = countnum + item.数量;
              if (item.错误代码 == name) {
                nameData = item.错误代码 + " | ";
                count = " " + item.数量;
              }
            });
            nameData = nameData + getPercent(count, countnum) + count;
            return nameData;
          };
        } else {
          this.clue(res);
        }
      });
    },
    /**
     * 近7日资产变化趋势
     */
    getInterfaceTrend() {
      getInterfaceTrend().then((res) => {
        if (res && res.code === 200) {
          this.columnOption8.source = res.data;
        } else {
          this.clue(res);
        }
      });
    },

    getInterfaceCount() {
      getInterfaceCount().then((res) => {
        if (res && res.code === 200) {
          this.kpi_4.value = res.data.manageCount ? res.data.manageCount : 0;
          // this.columnOption3.source = res.data
        } else {
          this.kpi_4.value = "0";
        }
      });
    },
    /**
     * 接口动态脱敏
     */
    getDesensitizationData() {
      getDesensitizationData().then((res) => {
        if (res && res.code === 200) {
          this.columnOption9.source = res.data;
        } else {
          this.clue(res);
        }
      });
    },

    //流量分析
    getDownUpFlow() {
      downUpflow().then((res) => {
        if (res && res.code === 200) {
          upDownflow().then((res2) => {
            if (res2 && res2.code === 200) {
              if (res2.data.analyse && res2.data.analyse.length > 0) {
                res2.data.analyse.forEach((item, index) => {
                  item.down = res.data.analyse[index].down;
                });
                res2.data.analyse = res2.data.analyse.slice(0, 12).reverse();
              }
              this.columnOption10.source = res2.data.analyse || [];
            } else {
              this.clue(res2);
            }
          });
        } else {
          this.clue(res);
        }
      });
    },
  },
  mounted() {
    this.getSensitiveInterface();
    this.assetStatistics();
    this.dataLevelStatistics();
    // this.totalInterfaceDataLevel()
    this.getDownUpFlow();
    this.getErrorData();
    // this.getAccessFlow()
    this.getInterfaceTrend();
    this.getInterfaceStatic();
    this.getInterfaceCount();
    this.getSensitiveApplication();
    this.dataTypeStatistics();
    this.getDesensitizationData();
    this.getInterfaceCall();
  },
};
</script>

<style scoped lang="scss">
.apisecurity-overview-wrap {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .grid-column-4 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .grid-column-3 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .grid-column-2 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 1fr;
  }

  .grid-column-1 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr;
  }

  .chart-container {
    height: 400px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
    border-radius: 4px;
  }

  .column-divided {
    height: 12px;
    width: 100%;
  }
}

.el-table {
  position: relative;
  width: calc(100% - 4px);
  margin-top: 0 !important;
}

::v-deep .common-header-style {
  background-color: rgba(23, 119, 206, 0.2);
  color: #000;
}

.chart-table {
  height: 100%;
}

/*::v-deep .el-table__body-wrapper{*/
/*  scrollbar-width: none; !* firefox *!*/
/*  -ms-overflow-style: none; !* IE 10+ *!*/

/*  &::-webkit-scrollbar {*/
/*    display: none; !* Chrome Safari *!*/
/*  }*/
/*}*/
</style>
